<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 1.准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom。用于支持react操作DOM -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script src="../js/babel.min.js"></script>
<script type="text/babel">
    //创建组件
    //生命周期回调函数 <=>生命周期钩子函数 <=>生命周期函数 <=>生命周期钩子
    class Lift extends React.Component {
        state = {opacity: 1};
        death = () => {
            //清除定时器
            // clearInterval(this.timer)
            //    卸载组件
            ReactDOM.unmountComponentAtNode(document.getElementById("test"));
        };
        //组件挂在完毕后调用
        componentDidMount(){
            console.log('@');
                this.timer = setInterval(() => {
                    //获取原状态
                    let {opacity} = this.state;
                    //减少0.1
                    opacity -= 0.1;
                    if (opacity <= 0) opacity = 1;
                    //    设置新的透明度
                    this.setState({opacity});
                }, 200);
        }
        // action=()=>{
        //     setInterval(() => {
        //         //获取原状态
        //         let {opacity} = this.state;
        //         //减少0.1
        //         opacity -= 0.1;
        //         if (opacity <= 0) opacity = 1;
        //         //    设置新的透明度
        //         this.setState({opacity});
        //     }, 200);
        // }
        //render调用的时机：初始化渲染、状态更新之后

        componentWillUnmount(){
            //清楚定时器
            clearInterval(this.timer)

        }
        render() {
            // 1+n次
            console.log('render');//指数级
            //这里会引发无限递归
            // setInterval(() => {
            //     //获取原状态
            //     let {opacity} = this.state;
            //     //减少0.1
            //     opacity -= 0.1;
            //     if (opacity <= 0) opacity = 1;
            //     //    设置新的透明度
            //     this.setState({opacity});
            // }, 200);

            return (
                <div>
                    <h2 style={{opacity: this.state.opacity}}>React学不会了怎么办</h2>
                    <button onClick={this.death}>不活了</button>
                    {/*<button onClick={this.action}>开始变化</button>*/}
                </div>
            );
        }
    }

    //渲染组件
    ReactDOM.render(<Lift/>, document.getElementById("test"));
</script>
</body>
</html>